<template>
	<div class='projectIndex'>
		<div class='data base_info'>
			<el-descriptions :column="3" border title="项目基本信息">
				 <el-descriptions-item min-width="200px" label="项目名称" label-align='center'>{{ projectDetail.name }}</el-descriptions-item>
				 <el-descriptions-item min-width="200px" label="项目描述" label-align='center'>{{ projectDetail.desc }}</el-descriptions-item>
				 <el-descriptions-item min-width="200px" label="消息推送地址" label-align='center'>{{ projectDetail.url }}</el-descriptions-item>
				 <el-descriptions-item min-width="200px" label="创建人" label-align='center'>{{ projectDetail.create_by_name }}</el-descriptions-item>
				 <el-descriptions-item min-width="200px" label="项目创建时间" label-align='center'>{{ projectDetail.create_time }}</el-descriptions-item>
				 <el-descriptions-item min-width="200px" label="项目更新时间" label-align='center'>{{ projectDetail.update_time }}</el-descriptions-item>
				 <el-descriptions-item min-width="200px" label="项目成员" label-align='center'>
					<el-tag v-for="item in projectDetail.user_names"  effect="dark" round style="margin-right: 5px;">{{ item.username }}</el-tag>
				 </el-descriptions-item>
			</el-descriptions>
		</div>
		<div class='data interface_info'>
			<el-descriptions title="数据看板"></el-descriptions>
			<el-row>
				<el-col :span="24" style="text-align: center; padding-left: 10px;">
					<el-card class="card">
					   <template #header>
					     <div style="text-align: center;  color: #409eff;">
					       <span>环境个数</span>
					     </div>
					   </template>
					   <div style="text-align: center; color: #409eff;">{{ projectDetail.env_number }}</div>
					 </el-card>
					 <el-card class="card">
					    <template #header>
					      <div style="text-align: center; color: #409eff;">
					        <span>服务个数</span>
					      </div>
					    </template>
					    <div style="text-align: center; color: #409eff;">{{ projectDetail.service_number }}</div>
					  </el-card>
					  <el-card class="card">
					     <template #header>
					       <div style="text-align: center; color: #409eff;">
					         <span>平台个数</span>
					       </div>
					     </template>
					     <div style="text-align: center; color: #409eff;">{{ projectDetail.plant_number }}</div>
					   </el-card>
					   <el-card class="card">
					      <template #header>
					        <div style="text-align: center; color: #409eff;">
					          <span>模块个数</span>
					        </div>
					      </template>
					      <div style="text-align: center; color: #409eff;">{{ projectDetail.module_number }}</div>
					    </el-card>
						<el-card class="card">
						   <template #header>
						     <div style="text-align: center;  color: #409eff;">
						       <span>页面个数</span>
						     </div>
						   </template>
						   <div style="text-align: center; color: #409eff;">{{ projectDetail.page_number }}</div>
						 </el-card>
						 <el-card class="card">
						    <template #header>
						      <div style="text-align: center;  color: #409eff;">
						        <span>元素个数</span>
						      </div>
						    </template>
						    <div style="text-align: center; color: #409eff;">{{ projectDetail.element_number }}</div>
						  </el-card>
						  <el-card class="card">
						     <template #header>
						       <div style="text-align: center;  color: #409eff;">
						         <span>接口个数</span>
						       </div>
						     </template>
						     <div style="text-align: center; color: #409eff;">{{ projectDetail.interface_number }}</div>
						   </el-card>
						   <el-card class="card">
						      <template #header>
						        <div style="text-align: center;  color: #409eff;">
						          <span>用例个数</span>
						        </div>
						      </template>
						      <div style="text-align: center; color: #409eff;">{{ projectDetail.case_number }}</div>
						    </el-card>
						 <el-card class="card">
						    <template #header>
						      <div style="text-align: center;  color: #409eff;">
						        <span>UI用例数</span>
						      </div>
						    </template>
						    <div style="text-align: center; color: #409eff;">{{ projectDetail.ui_case_number }}</div>
						  </el-card>
						  <el-card class="card" style="width: 120px;">
						     <template #header>
						       <div style="text-align: center;  color: #409eff;">
						         <span>API用例数</span>
						       </div>
						     </template>
						     <div style="text-align: center; color: #409eff;">{{ projectDetail.api_case_number }}</div>
						   </el-card>
						   <el-card class="card">
						      <template #header>
						        <div style="text-align: center;  color: #409eff;">
						          <span>步骤个数</span>
						        </div>
						      </template>
						      <div style="text-align: center; color: #409eff;">{{ projectDetail.step_number }}</div>
						    </el-card>
						    <el-card class="card">
						       <template #header>
						         <div style="text-align: center;  color: #409eff;">
						           <span>标签个数</span>
						         </div>
						       </template>
						       <div style="text-align: center; color: #409eff;">{{ projectDetail.tag_number }}</div>
						    </el-card>
							<el-card class="card">
							   <template #header>
							     <div style="text-align: center;  color: #409eff;">
							       <span>套件个数</span>
							     </div>
							   </template>
							   <div style="text-align: center; color: #409eff;">{{ projectDetail.suite_number }}</div>
							</el-card>
							<el-card class="card">
							   <template #header>
							     <div style="text-align: center;  color: #409eff;">
							       <span>脚本个数</span>
							     </div>
							   </template>
							   <div style="text-align: center; color: #409eff;">{{ projectDetail.script_number }}</div>
							</el-card>
							<el-card class="card">
							   <template #header>
							     <div style="text-align: center;  color: #409eff;">
							       <span>报告个数</span>
							     </div>
							   </template>
							   <div style="text-align: center; color: #409eff;">{{ projectDetail.report_number }}</div>
							</el-card>
				</el-col>
			</el-row>
		</div>
		<div class='data caes_info'>
			<el-descriptions title="用例看板"></el-descriptions>
			<el-row>
				<el-col :span="12">
					<el-table :data="projectDetail.module_detail" class='table'>
							<el-table-column label="模块名称"  min-width="150" align="center">
								<template #default="scope">
								  <el-tag  effect="dark" round>{{ scope.row.module__plant__name }}_{{ scope.row.module__name }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="用例总数" prop="count" min-width="80" align="center"/>
							<el-table-column label="API用例总数" prop="api_count" min-width="80" align="center" />
							<el-table-column label="UI用例总数" prop="ui_count" min-width="80" align="center"/>
					</el-table>
				</el-col>
				<el-col :span="12">
					<el-table :data="projectDetail.tag_detail" class='table'>
							<el-table-column label="用例标签"  min-width="100" align="center">
								<template #default="scope">
								  <el-tag  effect="dark" round>{{ scope.row.tag__name }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column label="用例总数" prop="count" min-width="80" align="center"/>
							<el-table-column label="API用例总数" prop="api_count" min-width="80" align="center"/>
							<el-table-column label="UI用例总数" prop="ui_count" min-width="80" align="center"/>
					</el-table>
				</el-col>
			</el-row>
			    
		</div>
	</div>
</template>

<script>
import {mapState} from 'vuex'
export default {
	data() {
		return {
			projectDetail: '',
		}
	},
	methods:{
		async getProject(){
			const response = await this.$api.getProject(this.projectInfo.id)
			if (response.status === 200){
				this.projectDetail = {...response.data.result}
			}
		},
		
	},
	computed: {
		...mapState(['projectInfo'])
		
	},
	created() {
		this.getProject()
	}
}
</script>

<style scoped>
	.projectIndex{
			margin: 10px;
			background-color: ghostwhite;
		}
	.data {
		padding: 10px;
		background-color: white;
		margin-bottom: 10px;
	}
	.projectIndex .card{
		width: 120px;
		height: 120px;
		float: left;
		margin: 10px 20px;
	}
	.table {
		height: calc(100vh - 700px);
	}

		
</style>
